<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <style>
        .my-switch .switch-btn,
        .my-switch>span {
            vertical-align: middle;
        }

        .my-switch {
            font-size: 15px;
            white-space: nowrap;
            display: inline-block;
        }

        .my-switch>span {
            display: inline-block;
            height: 2em;
            line-height: 2em;
            padding: 0px 10px;
            font-weight: bold;
        }

        .my-switch>span.active {
            color: #57a8fb;
        }

        .switch-btn {
            display: inline-block;
            width: 4em;
            height: 2em;
            border-radius: 2em;
            cursor: pointer;
            user-select: none;
            background-color: #dcdfe6;
            box-shadow: 0 0 4px #8d8d8e inset;
            transition: all 150ms ease;
        }

        .switch-btn.active {
            background-color: #57a8fb;
            box-shadow: 0 0 4px #3c75ad inset;
            ;
        }

        .switch-btn>input[type="checkbox"] {
            display: none;
        }

        .switch-btn .pot {
            display: inline-block;
            width: 2em;
            height: 2em;
            border-radius: 50%;
            transform: scale(0.76);
            background-color: white;
            box-shadow: 0 0 4px #afafaf;
            transition: all 200ms ease;
        }

        .switch-btn>input[type="checkbox"]:checked+.pot {
            margin-left: 50%;
        }
    </style>
</head>

<body>
    <div id="app">
        <pre v-pre class="note">
            语法1：v-bind:绑定属性="绑定的属性值"
            语法2：v-bind=" { 绑定属性:取值,绑定属性:取值,…… } "
        </pre>
        <p v-bind="{ a:1,b:2,c:3,class:'aa',style:'color:red' }">一次性绑定多个属性</p>
        <pre v-pre class="note">
        特性1：子组件标签上的属性处理方式
            + 子组件标签上绑定的所有属性，都会被$attrs进行加载，如果属性被props拦截，会从$attrs中删除；
            + (vue2\vue3)未被props拦截的$attrs加载的标签属性，如果组件只有一个根元素，会直接定义在组件的根标签上；
            + (vue3)未被props拦截的$attrs加载的标签属性，如果组件不止一个根元素，属性不在自动处理，
                     如果需要可以手动处理(使用v-bind="$attrs"进行绑定);【vue2的组件要求必须存在一个唯一根元素】

        特性2：子组件标签拦截属性props的只读特点
            + props 拦截的属性为只读属性，只能取值，不能修改;
            + props 为拦截来自父组件传递的数据，所以同样具有响应式特性=>父组件修改子组件也会跟着一起重新渲染
        </pre>
        <h5>父组件</h5>
        <p>msg:{{ msg }}</p>
        <input v-model="msg" type="text" />
        <!-- 文字为默认颜色 黑色 -->
        <my-comp :msg=" msg " :info="info"></my-comp>
        <!-- 文字切换为 红色 -->
        <my-comp :msg=" msg " style="color:red;"></my-comp>
        <hr>
        <my-switch></my-switch> <br><br>
        <my-switch style="font-size:10px"></my-switch> <br><br>
        <my-switch style="font-size:20px"></my-switch>
        <hr>
        <my-comp1 style="color:blue"></my-comp1>
        <my-comp1 style="color:red"></my-comp1>

    </div>
    <!-- 子组件容器 -->
    <script type="text/x-template" id="myComp">
        <div class="cbox" itany="网博" >
            <h5>子组件1</h5>
            <p>msg:{{ msg }}</p>
            <input v-model="msg" type="text" />
        </div>
    </script>

    <script type="text/x-template" id="myComp1">
        <!-- 该组件在vue2语法中会报错，因为不止一个根元素 -->
        <hr>
        <h5 v-bind="$attrs">子组件2-$attrs-{{ $attrs }}</h5>
        <h5 v-bind="$attrs">子组件2</h5>
        <hr>
    </script>

    <script type="module">
        import MySwitch from "./components/MySwitch.js";
        // 子组件实例
        const MyComp = {
            template: "#myComp",
            props: ["msg"]
        }
        const MyComp1 = {
            template: "#myComp1",
        }

        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        createApp({
            components: {
                MyComp,MySwitch,MyComp1
            },
            data () {
                return {
                    msg: "父组件msg",
                    info: "父组件info"
                }
            }
        }).mount("#app")

        // import Vue from "../../assets/vue2/vue.esm.browser.js";
        // new Vue({
        //     el:"#app",
        //     components: {
        //         MyComp,MySwitch,MyComp1
        //     },
        //     data () {
        //         return {
        //             msg: "父组件msg",
        //             info: "父组件info"
        //         }
        //     }
        // })
    </script>
</body>

</html>